import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    final FocusNode focusNode = FocusNode(); // 定义输入框组件焦点
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 243, 243, 1),
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(widget.title),
        elevation: 8,
        leading: IconButton(
          onPressed: () => {},
          icon: Icon(
            Icons.menu,
            color: Colors.black87,
          ),
        ),
      ),
      body: GestureDetector(
        onTap: () {
          focusNode.unfocus();
        },
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                width: double.infinity, // 宽度定义 最大宽度
                padding: EdgeInsets.all(20), //设置内边距
                //设置装饰  ，类似于  style
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius:
                        BorderRadius.vertical(bottom: Radius.circular(30))),
                child: Column(
                  // 对齐方式
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '发现',
                      style: TextStyle(fontSize: 25, color: Colors.black87),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Text(
                      '制作灵感',
                      style: TextStyle(
                          fontSize: 40,
                          color: Colors.black,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Container(
                      // 设置边距
                      padding: EdgeInsets.all(5),
                      // 类似于设置 样式
                      decoration: BoxDecoration(
                          color: Color.fromRGBO(244, 243, 243, 1),
                          borderRadius: BorderRadius.circular(15)),
                      child: TextField(
                        // 将输入焦点绑定
                        focusNode: focusNode,
                        // 定义样式
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            prefixIcon: Icon(
                              Icons.search,
                              color: Colors.black87,
                            ),
                            hintText: '请输入关键字进行搜索......',
                            hintStyle:
                                TextStyle(color: Colors.grey, fontSize: 15)),
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '今日推荐',
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: 15,
                                fontWeight: FontWeight.bold),
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          Container(
                            height: 200,
                            // 列表组件
                            child: ListView(
                              // 设置滚动方向  这里设置的  是横向的
                              scrollDirection: Axis.horizontal,
                              // 引入组件
                              children: [
                                promoCard('assets/image/1.jpeg'),
                                promoCard('assets/image/2.jpeg'),
                                promoCard('assets/image/3.jpeg'),
                                promoCard('assets/image/4.jpeg'),

                                // Container(s
                                //   height: 200,
                                //   width: 150,
                                //   color: Colors.pink[400],
                                //   margin: EdgeInsets.only(right: 15),
                                // )
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          Container(
                            height: 150,
                            // 值得注意的是， 这里image的定义是container 盒子的 背景
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(20),
                                image: DecorationImage(
                                    // 背景图片填充形式
                                    fit: BoxFit.cover,
                                    image: AssetImage('assets/image/5.jpeg'))),
                            // 盒子套盒子来了，老表
                            child: Container(
                              // 熟悉的盒子style
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(20),
                                  // 渐变  渐变啊，表
                                  gradient: LinearGradient(
                                      begin: Alignment.bottomRight,
                                      stops: [
                                        0.3,
                                        0.9
                                      ],
                                      // 重点啊重点   背景颜色黑色  透明度   0.7 -  0.2
                                      colors: [
                                        Colors.black.withOpacity(.7),
                                        Colors.black.withOpacity(.2),
                                      ])),
                              // 来了，盒子再套盒子
                              child: Align(
                                // 对齐方式  左下对齐
                                alignment: Alignment.bottomLeft,
                                child: Padding(
                                  padding: EdgeInsets.all(15),
                                  child: Text(
                                    '最佳设计',
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 20),
                                  ),
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

// 自定义组件
  Widget promoCard(String image) {
    return AspectRatio(
        aspectRatio: 2.52 / 3,  ///宽高比
        child: Container(
          margin: EdgeInsets.only(right: 15),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              image:
                  DecorationImage(fit: BoxFit.cover, image: AssetImage(image))),
        ));
  }
}
